<template>
  <div>
    <headerNav />
    <div class="mincard mindWidth mincard_main">
      <span @click="$router.push('/')">首页</span>>
      <span @click="$router.push('/search')">查企业</span>
      >
      <span>{{ companyData.companyName }}</span>
    </div>
    <div class="enterprise">
      <div class="mindWidth">
        <div class="enterprise_title">
          <div class="enterprise_title_L">
            <h2>{{ companyData.companyName }}</h2>
            <div class="label dominant" @click="contrast()">企业对比</div>
          </div>
          <div class="enterprise_title_R">
            <span class="fontColor changeHanld" @click="toCompanyPolicy">可申报项目</span>
            <span
              class="fontColor changeHanld"
              :class="companyData.whetherAttention == 0 ? '' : 'active'"
              @click="isfollow(companyData.whetherAttention)"
            >{{ companyData.whetherAttention == 0 ? "关注" : "已关注" }}</span>
            <span
              class="fontColor changeHanld"
              @click="companyData.whetherClaim === 0 ? claim() : tips(companyData.whetherClaim)"
            >
              <!-- {{ ['认领', '认领审核中', '已认领'] [companyData.whetherClaim] }} -->
              {{ companyData.whetherClaim == 0 ? '认领' : (companyData.whetherClaim == 1)?'认领审核中':'已认领' }}
            </span>
            <span class="fontColor changeHanld" @click="toPatentList">专利缴费</span>
            <span v-show="whetherInside === 1" class="fontColor changeHanld" @click="toExport">导出</span>
          </div>
        </div>
        <div class="check_info">
          <div class="check_info_l">
            <span>法定代表人：</span>
            <span>{{ companyData.companyLegalPerson || "无" }}</span>
            <span>联系方式：</span>
            <span>{{ companyData.companyPhoneNumber || "无" }}</span>
            <span>登记状态：</span>
            <span>{{ companyData.companyManageStatus || "无" }}</span>
            <span>成立时间：</span>
            <span>{{ companyData.companyEstablished || "无" }}</span>
          </div>
        </div>
        <div class="address">
          <div class="address_info_l">
            <span>曾用名：</span>
            <span style="max-width: 590px">
              {{
              companyData.companyFormerName || "无"
              }}
            </span>
            <span>所属行业：</span>
            <span style="max-width: 84px">
              {{
              companyData.companyField || "无"
              }}
            </span>
            <span>地址：</span>
            <span style="max-width: 180px">
              {{
              companyData.companyAddress || "无"
              }}
            </span>
          </div>
          <div
            v-if="
              companyData.companyAddress != '' &&
                companyData.companyAddress != null
            "
            class="nearby"
            @click="
              nearbyEnterprises(
                companyData.companyAddress,
                companyData.companyLatitude,
                companyData.companyLongitude
              )
            "
          >附近企业</div>
        </div>
      </div>
    </div>
    <div class="header_title mindWidth" v-if="companyId != ''" :class="isFixation ? 'active' : ''">
      <nuxt-link
        class="dominant changeHanld"
        :class="currentIndex === 0 ? 'nuxt-link-active' : ''"
        :to="'/enterprise/honor?id=' + companyId + '&name=' + companyData.companyName"
      >
        <img src="../../../static/image/enterprise/brandIcon-select.png" v-if="currentIndex == 0" />
        <img src="../../../static/image/enterprise/brandIcon.png" alt v-else />
        荣誉({{ companyData.companyHonorTotal || 0 }})
      </nuxt-link>
      <nuxt-link
        class="dominant changeHanld"
        :class="currentIndex === 1 ? 'nuxt-link-active' : ''"
        :to="'/enterprise/patent?id=' + companyId + '&name=' + companyData.companyName"
      >
        <img src="../../../static/image/enterprise/patentIcon-select.png" v-if="currentIndex == 1" />
        <img src="../../../static/image/enterprise/patentIcon.png" alt v-else />
        专利({{ companyData.companyPatentTotal || 0 }})
      </nuxt-link>
      <nuxt-link
        class="dominant changeHanld"
        :class="currentIndex === 2 ? 'nuxt-link-active' : ''"
        :to="'/enterprise/brand?id=' + companyId + '&name=' + companyData.companyName"
      >
        <img src="../../../static/image/enterprise/brandIcon-select.png" v-if="currentIndex == 2" />
        <img src="../../../static/image/enterprise/brandIcon.png" alt v-else />
        商标({{ companyData.companyTrademarkTotal || 0 }})
      </nuxt-link>
      <nuxt-link
        class="dominant changeHanld"
        :class="currentIndex === 3 ? 'nuxt-link-active' : ''"
        :to="'/enterprise/soft?id=' + companyId + '&name=' + companyData.companyName"
      >
        <img src="../../../static/image/enterprise/soft-select.png" v-if="currentIndex == 3" />
        <img src="../../../static/image/enterprise/soft.png" alt v-else />
        软著({{ companyData.companySoftTotal || 0 }})
      </nuxt-link>
    </div>
    <router-view v-slot="{ Component }" v-if="judge">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <navigation />
    <footerNav />
    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import {
  getCompanyInfo,
  commonRequest,
  postRequestSplicing,
  exportCompanyInfo,
  userInfo
} from "../../api/api.js";

import loginDialog from "../../components/login_item/LoginDialog";
export default {
  components: {
    loginDialog
  },
  data() {
    return {
      dialogVisible: false, // 显示关注已满弹框
      currentIndex: "",
      // 公司数据
      companyData: "",
      // 公司id
      companyId: "",
      judge: false,
      scroollTop: "", // 获取文档被卷入的高度
      domHeight: "", // 获取整个dom的高度
      documentHeight: "", // 元素的高度
      isFixation: false,
      userInfo: {},
      whetherInside: 0, //企业信息导出按钮 0不展示1展示
      name: this.$route.query.name,
      id: this.$route.query.id || this.$route.params.id
    };
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.path == "/enterprise/honor") {
          this.currentIndex = 0;
        }
        if (val.path == "/enterprise/patent") {
          this.currentIndex = 1;
        }
        if (val.path == "/enterprise/brand") {
          this.currentIndex = 2;
        }
        if (val.path == "/enterprise/soft") {
          this.currentIndex = 3;
        }
      }
    }
  },
  mounted() {
    console.log(this.$route);
    this.getCompanyDetail();
    window.addEventListener("scroll", this.getDomHeight);
  },
  methods: {
    ...mapMutations(["setHonorAddress"]),
    getCompanyDetail() {
      if (this.name) {
        getCompanyInfo({ name: this.name }).then(res => {
          if (res.code == 10005) {
            this.dialogVisible = true;
            this.companyData = res.result;
          } else if (res.code == 10001) {
            this.companyData = res.result;
            this.companyId = res.result.companyId;
          } else {
            if (res.result === null) {
              // 重铸对象
              this.companyData = {};
              this.companyData.companyName = this.name;
              this.companyData.whetherAttention = 0;
              this.companyData.whetherClaim = 0;
              this.companyData.companyHonorTotal = 0;
              this.companyData.companyPatentTotal = 0;
              this.companyData.companyTrademarkTotal = 0;
              this.companyData.companySoftTotal = 0;
              this.companyId = 1;
              this.showCompanyContrast = false;
            } else {
              this.companyData = res.result;
              this.companyId = res.result.companyId;
            }
            let userInfo = JSON.parse(localStorage.getItem("userInfo"));
            console.log("userInfo", userInfo);
            if (userInfo) {
              this.whetherInside = userInfo.whetherInside;
            }
          }
          this.setHonorAddress(res.result);
          setTimeout(function() {
            this.judge = true;
          }, 100);
        });
      } else {
        this.judge = true;
        this.companyId = this.id;
        getCompanyInfo({ id: this.id }).then(res => {
          if (res.code == 10005) {
            this.dialogVisible = true;
          }
          let userInfo = JSON.parse(localStorage.getItem("userInfo"));
          console.log("userInfo", userInfo);
          if (userInfo) {
            this.whetherInside = userInfo.whetherInside;
          }
          this.companyData = res.result;
          this.setHonorAddress(res.result);
        });
      }
    },
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    // 去登录页
    toLoginPage() {
      window.open("/login", "_blank");
    },
    // 会会员页
    toVIPPage() {
      window.open("/pageVIP", "_blank");
    },

    //
    getDomHeight() {
      this.domHeight = document.body.clientHeight; // 获取dom的高度
      this.scroollTop =
        document.documentElement.scrollTop || document.body.scrollTop; // 获取卷入的高度

      if (Math.floor(this.scroollTop) >= 250) {
        this.isFixation = true;
      } else {
        this.isFixation = false;
      }
      // 获取dom 的高度
    },
    ...mapMutations(["setIsShow"]), // 登录弹框

    // 跳转至附近企业
    nearbyEnterprises(value, companyLatitude, companyLongitude) {
      window.open(`/nearbyEnterprise?company=${value}&nf=&xztj=`, "_blank");
      let Location = {
        companyLongitude, // 企业经度
        companyLatitude // 企业纬度
      };
      if (process.client) {
        sessionStorage.setItem("enterpriseLocation", JSON.stringify(Location));
      }
    },
    contrast() {
      window.open("/condition?id=" + this.companyId);
    },

    // 提示
    tips(index) {
      if (index == 1) {
        this.$message.warning({
          message: "认领审核中",
          type: "warning"
        });
      }
      if (index == 2) {
        this.$message.warning({
          message: "已认领",
          type: "warning"
        });
      }
    },
    // 企业认领
    claim() {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.$refs.login.open();
        return;
      }
      window.open(
        `/enterpriseClaim?id=${this.companyId}&title=${this.companyData.companyName}`,
        "_blank"
      );
    },
    // 关注企业
    isfollow(val) {
      if (val == 0) {
        postRequestSplicing(
          "/api/cms/cmsCompany/attentionCompany",
          `id=${this.companyId}`
        ).then(res => {
          // console.log(res);
          if (res.code == 10001) {
            this.$refs.login.open();
          } else if (res.code == 10004) {
            // 企业关注次数已满
            this.dialogVisible = true;
          } else if (res.code == 200) {
            this.$message({ type: "success", message: "关注成功" });
            this.companyData.whetherAttention = 1;
          }
        });
      } else if (val == 1) {
        postRequestSplicing(
          "/api/cms/cmsCompany/cancelAttentionCompany",
          `id=${this.companyId}`
        ).then(res => {
          if (res.code == 200) {
            this.$message({ type: "success", message: "取消关注成功" });
            this.companyData.whetherAttention = 0;
          }
        });
      }
    },
    // 企业专利列表
    toPatentList() {
      window.open(
        `/patentList?id=${this.companyId}&name=${this.companyData.companyName}`,
        "_blank"
      );
    },
    // 公司关联政策
    toCompanyPolicy() {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.$refs.login.open();
        return;
      }
      window.open(`/companyPlolicy?id=${this.companyId}`, "_blank");
    },
    // 导出企业荣誉
    toExport() {
      exportCompanyInfo({ keyNo: this.companyData.keyNo }).then(res => {
        let blob = new Blob([res.data]);
        let link = document.createElement("a");
        let fileName = "企业信息.xls";
        link.href = window.URL.createObjectURL(blob);
        link.download = decodeURIComponent(fileName);
        link.click();
      });
    }
  }
};
</script>

<style lang="less" scoped>
/* 登录框的样式修改 */
/deep/ .el-dialog__footer {
  height: 310px;
}

/* 弹框的开始 */
:deep(.el-dialog__footer) {
  height: 310px;
}

.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;

  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}

.el-dialog__footer {
  height: 340px;
  position: relative;
}

.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}

.el-dialog {
  border-radius: 10px;
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}

.mincard_main {
  span {
    margin: 0 10px;
    font-size: 14px;
    cursor: pointer;
  }
}

.enterprise {
  height: 150px;
  background-color: #fff;
  padding: 20px 0;

  .enterprise_title {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;

    .enterprise_title_L {
      display: flex;
      align-items: center;
      width: 60%;
    }

    h2 {
      font-size: 24px;
    }

    .label {
      padding: 4px 0;
      border-radius: 6px;
      margin-left: 20px;
      cursor: pointer;
      width: 100px;
      text-align: center;
    }

    .enterprise_title_R {
      display: flex;
      align-items: center;

      span {
        margin: 0 10px;
        font-size: 14px;
        border-radius: 4px;
        border: #44a2ff 1px solid;
        padding: 4px 10px;

        &.active {
          color: #fff;
          background-color: #bfbfbf;
          border: none;
        }
      }
    }
  }

  .check_info,
  .address {
    display: flex;
    align-items: center;
  }

  .check_info {
    .check_info_l {
      margin-top: 5px;

      span {
        color: #ccc;
        font-size: 14px;
        // margin-right: 10px;
      }

      span:nth-child(even) {
        margin-right: 40px;
      }
    }
  }

  .address {
    display: flex;
    align-items: center;
    margin-top: 15px;
  }

  .address_info_l {
    span {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
      color: #ccc;
      font-size: 14px;
      // margin-right: 10px;
    }

    span:nth-child(even) {
      margin-right: 40px;
    }
  }

  .nearby {
    color: #44a2ff;
    font-size: 14px;
    cursor: pointer;
  }
}

.header_title {
  margin: 10px auto;
  display: flex;
  align-items: center;
  height: 70px;
  padding: 10px 0;

  &.active {
    position: fixed;
    left: 50%;
    top: 20px;
    right: 50%;
    transform: translate(-50%, -50%);
  }

  a {
    flex: 1;
    height: 100%;
    display: flex;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #44a2ff;
    border-right: 1px solid #ccc;

    &:last-child {
      border-right: none;
    }

    &.nuxt-link-active {
      background-color: #44a2ff;
      color: #fff;
    }

    img {
      width: 21px;
      height: 21px;
      margin-right: 10px;
    }
  }
}

.table_bd_item {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  .noData,
  .noQueryData {
    // height: 100%;
    a {
      color: #1d78de;
    }
  }
}
</style>
